<template>
	<view class="iphonex">
		<view class="a">
			<u-search searchIconSize="44" height="70" placeholder="输入关键字进行搜索" v-model="keyword" @change="getSearch"
				@custom="getSearch"></u-search>
		</view>
		<view class="address-book-container" v-if="!keyword">
			<!-- 左侧通讯录 -->
			<scroll-view class="scroll-container uni-list" scroll-y="true" :scroll-into-view="toView"
				scroll-with-animation="true">
				<view class="uni-list" v-for="(p, i) in list" :key="i" :id="p.id">
					<view class="uni-list-cell pd-20 title">{{ p.id }}</view>
					<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in p.brands" :key="index"
						@click="getModel(item)">
						<img class="contact-img" :src="item.brandLogo" alt="" />
						<view class="uni-list-cell-db">
							<view class="contact-name">{{ item.showName }}</view>
							<!--<view class="contact-address">{{ item.address }}</view>
	            <view class="contact-phone">{{ item.phone }}</view> -->
						</view>
					</view>
				</view>
			</scroll-view>

			

			<!-- 右侧字母导航条 -->
			<view class="letter-nav">
				<view :class="['item',Inv== index?'on':'']" v-for="(item, index) in indexList" :key="index"
					@click="toSelectIndex(item)">
					{{ item }}
				</view>
			</view>
		</view>
		<view v-else-if="searchList.length > 0" class="address-book-container">
			<!-- 左侧通讯录 -->
			<scroll-view class="scroll-container uni-list" scroll-y="true" scroll-with-animation="true">
				<view class="uni-list" v-for="(p, i) in searchList" :key="i" :id="p.id">
					<view class="uni-list-cell pd-20 title">{{ p.showName }}</view>
					<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in p.models" :key="index"
						@click="getCCByModelId(item)">
						<view class="uni-list-cell-db">
							<view class="contact-name">{{ item.modelName }}</view>
							<!--<view class="contact-address">{{ item.address }}</view>
		            <view class="contact-phone">{{ item.phone }}</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- @click="goUrl('/pages/home/detail/index?modelId=' + item.modelId + '&title=' +  p.brandName + item.modelName)" -->
		
			<!-- 右侧字母导航条 -->
			<view class="letter-nav">
				<view :class="['item',Inv== index?'on':'']" v-for="(item, index) in indexList" :key="index"
					@click="toSelectIndex(item)">
					{{ item }}
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无内容" width="320" height="320"
				textSize="24"></u-empty>
		</view>
		<uni-drawer ref="modelRight" :width="200" mode="right">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" @click="getCCByModelId(m)" v-for="m in models" :key="m.modelId">
						<text>{{m.modelName}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-drawer ref="ccRight" :width="200" mode="right">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" @click="getSaleNameByModelId(cc)" v-for="cc in saleCC" :key="cc">
						<text>{{cc}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-drawer ref="yearRight" :width="200" mode="right">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" @click="getYearByModelId(year)" v-for="year in yearNames"
						:key="year">
						<text>{{year}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		<uni-drawer ref="saleRight" :width="200" mode="right">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" @click="getCarDetail(sale)" v-for="sale in saleNames" :key="sale">
						<text>{{sale}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		getBrand,
		getBrandModel,
		getCCByModelId,
		getSaleNameByModelId,
		getSaleNameByModelIdAndCcAndYear,
		getSaleNameByModelIdAndCcAndYearAndSaleName
	} from '@/api/car.js';
	import {
		HEADER,
		HTTP_REQUEST_URL,
	} from '@/config/app';
	export default {
		data() {
			return {
				keyword: '',
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				list: [],
				toView: '',
				models: [],
				saleCC: [],
				modelId: 0,
				saleNames: [],
				yearNames: [],
				selectCC: '',
				searchList: [],
				selectYear: '',
				carId: 0,
				brandName: '',
				currentRequestId: 0,
				images: [],
				comment: '',
				type: '',
				videoPath: ''
			}
		},
		onLoad(options) {
			let that = this;
			that.images = JSON.parse(decodeURIComponent(options.images)) || [];
			that.comment = options.comment || '';
			if (options.type) {
				that.type = options.type;
			}
			if (options.videoPath) {
				that.videoPath = decodeURIComponent(options.videoPath)
			}
			console.log(that.images);
			console.log(that.comment);
			this.getBrand();
		},
		methods: {
			// 发起搜索请求
			getSearch(keyword) {
				if (!keyword.trim()) {
					this.searchList = []; // 如果关键字为空，直接清空列表
					return;
				}
			
				const requestId = ++this.currentRequestId; // 标记当前请求
				const that = this;
			
				uni.request({
					url: HTTP_REQUEST_URL + "/api/car/getKey",
					//url: HTTP_REQUEST_URL + "/car/getKey",
					method: "GET",
					data: {
						keyWord: keyword
					},
					success(res) {
						// 仅处理最后一次发起的请求
						if (requestId === that.currentRequestId) {
							that.searchList = res.data.value || []; // 更新搜索结果
						}
					},
					fail(err) {
						if (requestId === that.currentRequestId) {
							uni.showToast({
								title: "搜索失败",
								icon: "none",
							});
						}
					},
				});
			},
			getCarDetail(saleName) {
				let that = this;
				getSaleNameByModelIdAndCcAndYearAndSaleName({
					modelId: this.modelId,
					cc: this.selectCC,
					year: this.selectYear,
					saleName: saleName
				}).then(res => {
					this.carId = res.value[0];
					uni.redirectTo({
						url: `/pages/commponent/release_case?carId=`+this.carId +`&carDetailName=`+this.brandName + ' ' + saleName + ' ' + this.selectYear + `&images=${encodeURIComponent(JSON.stringify(this.images))}` +'&comment='+this.comment +'&type='+this.type + `&videoPath=${encodeURIComponent(this.videoPath)}`
					});
				})
			},
			getYearByModelId(year) {
				this.saleNames = [];
				this.selectYear = year;
				getSaleNameByModelIdAndCcAndYear({
					modelId: this.modelId,
					cc: this.selectCC,
					year: year
				}).then(res => {
					this.saleNames = res.value;
					this.$refs["saleRight"].open();
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			getSaleNameByModelId(cc) {
				this.selectCC = cc;
				getSaleNameByModelId({
					modelId: this.modelId,
					cc: cc
				}).then(res => {
					this.yearNames = res.value;
					if (this.yearNames.length === 0) {
						if (this.isLogin == false) {
							toLogin();
							return;
						}
					} else {
						this.$refs["yearRight"].open();
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			getCCByModelId(item) {
				let that = this;
				that.modelId = item.modelId;
				that.saleCC = [];
				that.yearNames = [];
				getCCByModelId({
					modelId: item.modelId,
				}).then(res => {
					this.saleCC = res.value;
				})
				this.$refs["ccRight"].open()
			},
			/**
			 * 获取车系
			 */
			getModel(item) {
				let that = this;
				this.yearNames = [];
				this.saleCC = [];
				this.models = [];
				this.saleNames = [];
				that.brandName = item.brandName
				getBrandModel({
					brandId: item.brandId,
				}).then(res => {
					that.models = res.value;
					this.$refs["modelRight"].open()
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},
			toSelectIndex(item) {
				this.toView = item;
			},
			/**
			 * 获取所有车灯品牌
			 */
			getBrand() {
				let that = this;
				getBrand().then(res => {
					that.list = res.value;
				}).catch(err => {
					that.$util.Tips({
						title: res.message
					});
				})
			},
		}
	}
</script>

<style>
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info-content {
		padding: 10px 15px;
		border-bottom: 1px solid #eaeaea;
		/* 添加下划线 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		transition: all 0.3s ease;
		/* 添加过渡效果 */
		cursor: pointer;
	}

	.a {
		padding: 30rpx;
		position: relative;
		z-index: 9;
		display: flex;
		align-items: center;
	}

	.a .search {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		background: #F6F7F9;
		border-radius: 60rpx;
	}

	.a .search input {
		background: none;
	}

	.uni-list:after,
	.uni-list::before {
		display: none;
	}

	.title {
		background: #F6F7F9;
	}

	.contact-img {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
	}

	.scroll-container {
		height: 100vh;
	}


	.letter-nav {
		background: #F6FAF9;
		border-radius: 20rpx;
		text-align: center;
		padding: 10rpx;
		z-index: 99;
		position: fixed;
		right: 20rpx;
		top: 50%;
		transform: translate(0, -50%);
		color: #B2B2B2;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.letter-nav .item:hover {
		color: #06A972;
	}

	.pd-20 {
		padding: 10rpx 20rpx;
	}

	//麦克风样式
	.fixed-mic {
		position: fixed;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 0;
		background-color: #ffffff;
		padding: 10px;
		border-radius: 50%;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.mic-icon {
		position: relative;
		z-index: 2;
	}

	/* 激活时光圈动画 */
	.fixed-mic.active::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 120px;
		/* 光圈的大小 */
		height: 120px;
		/* 光圈的大小 */
		margin-top: -60px;
		/* 通过负值偏移，确保光圈垂直居中 */
		margin-left: -60px;
		/* 通过负值偏移，确保光圈水平居中 */
		border-radius: 50%;
		background-color: rgba(0, 152, 0, 0.2);
		/* 绿色光圈 */
		opacity: 0;
		transform: scale(0);
		/* 初始状态下的缩放 */
		animation: pulse 1.5s ease-out infinite;
		/* 无限循环的动画 */
		pointer-events: none;
		z-index: 1;
	}


	/* 激活时光圈动画 */
	.fixed-mic.active::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 120px;
		/* 光圈的大小 */
		height: 120px;
		/* 光圈的大小 */
		margin-top: -60px;
		/* 通过负值偏移，确保光圈垂直居中 */
		margin-left: -60px;
		/* 通过负值偏移，确保光圈水平居中 */
		border-radius: 50%;
		background-color: rgba(0, 152, 0, 0.2);
		/* 绿色光圈 */
		opacity: 0;
		transform: scale(0);
		/* 初始状态下的缩放 */
		animation: pulse2 1.5s ease-out infinite;
		/* 无限循环的动画 */
		pointer-events: none;
		z-index: 1;
	}

	@keyframes pulse {
		0% {
			opacity: 0.2;
			transform: scale(0);
		}

		50% {
			opacity: 0.7;
			transform: scale(1.5);
			/* 光圈最大扩展 */
		}

		100% {
			opacity: 0;
			transform: scale(2.5);
			/* 光圈最终消失 */
		}
	}

	@keyframes pulse2 {
		0% {
			opacity: 0.1;
			transform: scale(0);
		}

		50% {
			opacity: 0.4;
			transform: scale(2);
			/* 第二层光圈最大扩展 */
		}

		100% {
			opacity: 0;
			transform: scale(3);
			/* 第二层光圈最终消失 */
		}
	}

	.model-detail {
		position: fixed;
		/* 悬浮定位 */
		top: 800rpx;
		/* 距离顶部20px */
		left: 50%;
		/* 居中显示 */
		transform: translateX(-50%);
		/* 完全居中 */
		background-color: rgba(0, 0, 0, 0.7);
		/* 背景色可根据需要修改 */
		color: white;
		padding: 10px;
		border-radius: 5px;
		z-index: 9999;
		/* 确保悬浮在其他元素之上 */
	}

	.model-detail-text {
		font-size: 16px;
		word-wrap: break-word;
		/* 防止文字溢出 */
	}
</style>